<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-fluid {
            padding: 0;
        }

        .layui-nav.layui-nav-tree {
            padding-top: 60px;
        }

        .side-bar {
            width: 200px;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            transition: transform .5s ease-in-out
        }
        .side-bar-hide{
            transform:translateX(-200px);
        }

        .content-side {
            position: fixed;
            left: 200px;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .layui-header {
            border-bottom: 1px solid #ccc;
            line-height: 60px;
        }

        .main-content {
            height: calc(100vh - 60px - 30px);
        }

        .layui-footer {
            height: 30px;
            border-top: 1px solid #ccc;
        }

        .layui-tab {
            margin: 0;
        }

        .layui-tab .layui-tab-title {
            height: 30px;

        }

        .layui-tab .layui-tab-title li {
            line-height: 30px;
        }

        .logo {
            position: fixed;
            left: 0;
            top: 0;
            height: 60px;
            width: 200px;
            line-height: 60px;
            padding-left: 10px;
            box-sizing: border-box;
            z-index:999;
            background-color: #fafafa;
        }


        .layui-tab-title {
            /*border-width: 1px;
            border-style: solid;
            border-radius: 2px 2px 0 0;
            box-sizing: border-box;
            border-right: 1px solid #ccc;
            box-sizing: border-box;*/
        }

        .layui-tab-title .layui-this:after {
            position: absolute;
            left: 0;
            top: 0;
            content: "";
            width: 100%;
            height: 31px;
            border-width: 1px;
            border-bottom-width: 2px;
            border-style: solid;
            border-bottom-color: #fff;
            border-radius: 2px 2px 0 0;
            box-sizing: border-box;
            pointer-events: none
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="side-bar">


        </div>
        <div class="content-side">
            <div class="layui-header" style="background-color:#fafafa;border:0;">
                <div class="logo">
                    <img src="images/nova-logo.png" style="height:30px;"><span
                        style="margin-left:10px;font-size:18px;">Nova管理系统</span>
                </div>
                <ul class="layui-nav layui-bg-gray layui-header-left" style="position: fixed;left:200px;">
                    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="xsMenuLeft"
                        style="cursor:pointer;">
                        <i class="layui-icon layui-icon-spread-left"></i>
                    </li>
                    <li class="layui-nav-item layui-show-sm-inline-block layui-hide-xs" lay-header-event="mdMenuLeft"
                        style="cursor:pointer;">
                        <i class="layui-icon layui-icon-shrink-right" ></i>
                    </li>
                </ul>
                <ul class="layui-nav layui-bg-gray layui-layout-right">
                    <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                        <a href="javascript:;">
                            <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                            tester
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">Your Profile</a></dd>
                            <dd><a href="javascript:;">Settings</a></dd>
                            <dd><a href="javascript:;">Sign out</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-more-vertical"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main-content">
                <div class="layui-tab" lay-filter="nav-tab" lay-allowclose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="home.html" lay-allowclose="false">首页</li>
                    </ul>
                </div>
                <div class="layui-tab-content" style="height:cals( 100% - 30px);">
                    <iframe id="content-frame" src="home.html" frameborder="0" width="100%" height="100%"
                        scrolling="auto"></iframe>
                </div>
            </div>
            <div class="layui-footer">
                footer
            </div>
        </div>

    </div>

    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.config({
            base: "module/"
        }).use(["test", 'element', 'layer', 'util'], function () {
            var $ = layui.$;
            var element = layui.element;
            var test = layui.test;
            var layer = layui.layer;
            var util = layui.util;
            $.ajax({
                url: "menu.json",
                success: function (data) {
                    let menu = "<ul class='layui-nav layui-nav-tree layui-nav-side'>";
                    menu += "<li class='layui-nav-item layui-this'><a href='javascript:;' id='home.html' lay-on='openMenu'><i class='layui-icon layui-icon-home'></i>首页</a></li>";
                    for (let i = 0; i < data.list.length; i++) {

                        if (data.list[i].children) {
                            menu += "<li class='layui-nav-item'><a href='javascript:;'><i class='layui-icon "+data.list[i].icon+"'></i>" + data.list[i].name + "</a>";
                            menu += createMenu(data.list[i].children);
                        } else {
                            menu += "<li class='layui-nav-item'><a href='javascript:;' id='" + data.list[i].url + "' lay-on='openMenu'><i class='layui-icon "+data.list[i].icon+"'></i>" + data.list[i].name + "</a>";
                        }
                        menu += "</li>";
                    }
                    menu += "</ul>";
                    $(".side-bar").append(menu);
                    element.render();

                }
            });
            util.event('lay-header-event', {
                xsMenuLeft: function (othis) { // 左侧菜单事件
                    //console.log(othis);
                    let htmlStr = $(othis).html();
                    if (htmlStr.indexOf("layui-icon-spread-left") > -1) {
                        
                        //console.log($(".side-bar").css("width"));
                        //$(".content-side").css({"position":"absolute","left":"0px"});                           
                        $(othis).html("<i class='layui-icon layui-icon-shrink-right'></i>");
                    } else {
                        $(othis).html("<i class='layui-icon layui-icon-spread-left'></i>");
                        //$(".layui-nav-side").show();
                    }
                    //layer.msg('展开左侧菜单的操作', {icon: 0});
                },
                mdMenuLeft: function (othis) {
                    let htmlStr = $(othis).html();
                    if (htmlStr.indexOf("layui-icon-spread-left") > -1) {
                        $(othis).html("<i class='layui-icon layui-icon-shrink-right'></i>");
                        $(".side-bar").removeClass("side-bar-hide");
                        $('.layui-nav-side').css("left","0px");
                        $(".content-side").css("left","200px");
                    } else {
                        $(othis).html("<i class='layui-icon layui-icon-spread-left'></i>");
                        $(".side-bar").addClass("side-bar-hide");
                        $(".content-side").css("left","0px");
                        $(".content-side").css("transition","left .5s ease-in-out")
                        //$(".logo").css({"position":"absolute"});
                    }
                    //layer.msg('展开左侧菜单的操作', {icon: 0
                    
                },
                menuRight: function () {  // 右侧菜单事件
                    layer.open({
                        type: 1,
                        title: '更多',
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt', // 右上角
                        anim: 'slideLeft', // 从右侧抽屉滑出
                        shadeClose: true,
                        scrollbar: false
                    });
                }
            });
            util.on('lay-on', {
                openMenu: function (data) {
                    //console.log(data);
                    //console.log($(data).attr('id'));
                    let id = $(data).attr('id');
                    let $node = $("li[lay-id='" + id + "']");
                    //alert($node)
                    if ($node.length == 0) {
                        element.tabAdd('nav-tab', {
                            title: $(data).html(),
                            content: '<iframe id="content-frame" src="' + id + '" frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>',
                            id: id
                        });
                    }
                    element.tabChange('nav-tab', id);

                }
            });
            element.on('tab(nav-tab)', function (data) {
                //alert("tt");
                $("#content-frame").attr("src", data.id);
                //console.log(data);

            })

            //test.m1("1","2");
            //test.m2("3","4");
        });
        //构建子菜单
        function createMenu(list) {
            let menu = "";
            console.log(list);
            for (let i = 0; i < list.length; i++) {
                menu += "<dl class='layui-nav-child'>";
                menu += "<dd><a href='javascript:;' id='" + list[i].url + "' lay-on='openMenu'><i class='layui-icon "+list[i].icon+"'></i>" + list[i].name + "</a>";
                if (list[i].children) {
                    menu += createMenu(list[i].children);
                }
                menu += "</dd>";
                menu += "</dl>";
            }
            return menu;
        }

        
        
    </script>
</body>

</html>